<template>
    <div class="drugManage">
        <div id="manage">
            <div style="float: left;top:0px">
                <i  style="font-size: x-large" class="el-icon-document-checked"></i><span style="font-weight:bold;font-size:x-large">药库管理</span>
            </div>
            <br>
            <el-divider ></el-divider>
            <div >
                <el-input v-model="drugCode" style="width: 270px;margin-left: 25px;float: left;" placeholder="请输入药品编号" ></el-input>
                <el-input v-model="mnemonicCode" style="width: 270px;margin-left: 25px; float: left;" placeholder="请输入拼音助记码" ></el-input>
                <el-input v-model="drugName" style="width: 270px; margin-left: 25px;float: left;" placeholder="请输入药品名称" ></el-input>
                <el-button style="margin-left: 25px" type="primary" @click="selectDrug"> 搜索</el-button>
                <el-button style="margin-left: 25px" type="primary"  @click="dialogFormVisible1 = true">添加药品</el-button>
                <el-dialog title="添加药品" :visible.sync="dialogFormVisible1">
                    <el-form v-model="drugForm">
                        <el-form-item label="药品编码:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugCode" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="药品名称:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugName" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="药品规格:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugFormat" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="包装单位:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugUnit" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="生产厂家:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.manufacturer" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="药剂类型:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugDosage" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="药品类型:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugType" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="药品单价:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.drugPrice" value="" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="拼音助记码:" :label-width="formLabelWidth">
                            <el-input v-model="drugForm.mnemonicCode" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addDrug(drugForm)">确 定</el-button>
                </div>
                </el-dialog>
            </div>
        </div>
        <el-divider ></el-divider>
        <el-table :data="drugList" height="410" style="width: 100%">
            <el-table-column
                    label="编号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="药品编码"
                    prop="drugCode">
            </el-table-column>
            <el-table-column
                    label="药品名称"
                    prop="drugName">
            </el-table-column>
            <el-table-column
                    label="药品规格"
                    prop="drugFormat">
            </el-table-column>
            <el-table-column
                    label="包装单位"
                    prop="drugUnit">
            </el-table-column>
            <el-table-column
                    label="生产厂家"
                    prop="manufacturer">
            </el-table-column>
            <el-table-column
                    label="单价"
                    prop="drugPrice">
            </el-table-column>
            <el-table-column >
                <template slot-scope="drug">
                    <el-button type="text"  @click="handleEdit(drug.$index, drug.row)">修改</el-button>
                    <el-dialog title="修改药品信息" :visible.sync="dialogFormVisible2">
                        <el-form v-model="dialogEditData">
                            <el-form-item label="药品编码:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugCode" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="药品名称:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="药品规格:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugFormat" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="包装单位:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugUnit"  autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="生产厂家:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.manufacturer"  autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="药剂类型:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugDosage" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="药品类型:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugType" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="药品单价:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.drugPrice" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="拼音助记码:" :label-width="formLabelWidth">
                                <el-input v-model="dialogEditData.mnemonicCode" autocomplete="off"></el-input>
                            </el-form-item>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="updateDrug(dialogEditData)">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-button type="text" style="float:right;margin-right: 30px;" @click="deleteDrug(drug.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    //ZSYJAZZ  注射用甲氨喋呤   86979474000208
    import axios from "axios";

    axios.defaults.baseURL='http://127.0.0.1:8088/drugInfo';
    export default {
        name: "DrugStorageManageView",
        data() {
            return {
                id:'',
                drugCode:'',
                mnemonicCode:'',
                drugName:'',
                drugFormat:'',
                drugUnit:'',
                manufacturer:'',
                drugDosage:'',
                drugType:'',
                drugPrice:'',
                mnemonicCode:'',
                creationDate:'',
                drugList: [],
                drugForm:{
                    id:'',
                    drugCode:'',
                    drugName:'',
                    drugFormat:'',
                    drugUnit:'',
                    manufacturer:'',
                    drugDosage:'',
                    drugType:'',
                    drugPrice:'',
                    mnemonicCode:'',
                },
                formLabelWidth: '120px',
                dialogTableVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                dialogEditData:{
                    id:'',
                    drugCode:'',
                    drugName:'',
                    drugFormat:'',
                    drugUnit:'',
                    manufacturer:'',
                    drugDosage:'',
                    drugType:'',
                    drugPrice:'',
                    mnemonicCode:'',
                },
            }
        },
        methods: {
            selectDrug(){
                axios.post('/select',{
                    drugCode:this.drugCode,
                    mnemonicCode:this.mnemonicCode,
                    drugName:this.drugName,
                }).then(response=>{
                    console.log(response.data);
                    this.drugList=response.data.data
                    this.$message({
                        message: '查询成功',
                        type: 'success'
                    });
                }).catch(error=>{
                    console.log(error)
                });
            },
            deleteDrug(id){
                axios.post('/delete',{
                    id:id,
                }).then(response=>{
                    console.log("id为"+id);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }).catch(error=>{
                    console.log(error)
                });
            },
            updateDrug(dialogEditData){
                axios.post('/update',{
                    id:dialogEditData.id,
                    drugCode:dialogEditData.drugCode,
                    mnemonicCode:dialogEditData.mnemonicCode,
                    drugName:dialogEditData.drugName,
                    drugFormat:dialogEditData.drugFormat,
                    drugUnit:dialogEditData.drugUnit,
                    manufacturer:dialogEditData.manufacturer,
                    drugDosage:dialogEditData.drugDosage,
                    drugType:dialogEditData.drugType,
                    drugPrice:dialogEditData.drugPrice,
                    mnemonicCode:dialogEditData.mnemonicCode,
                }).then(response=>{
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.dialogFormVisible2 = false;
                }).catch(error=>{
                    console.log(error)
                });
            },
            addDrug(drugForm){
                axios.post('/add',{
                    id:drugForm.id,
                    drugCode:drugForm.drugCode,
                    mnemonicCode:drugForm.mnemonicCode,
                    drugName:drugForm.drugName,
                    drugFormat:drugForm.drugFormat,
                    drugUnit:drugForm.drugUnit,
                    manufacturer:drugForm.manufacturer,
                    drugDosage:drugForm.drugDosage,
                    drugType:drugForm.drugType,
                    drugPrice:drugForm.drugPrice,
                    mnemonicCode:drugForm.mnemonicCode,
                    creationDate:new Date(),
                }).then(response=>{
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.dialogFormVisible1 = false;
                    //this.init();
                }).catch(error=>{
                    console.log(error)
                });
            },
            init(){
                axios.get('/query'
                ).then(result=>{
                    console.log(result.data.data);
                    this.drugList=result.data.data
                }).catch(error=>{
                    console.log(error)
                });
            },
            handleEdit(index, row){
                this.dialogEditData=row;
                this.dialogFormVisible2 = true;
            }
        },
        mounted(){
            //this.init()
        },

    }
</script>

<style scoped>
</style>